<template>
  <div class="reset-container">
    <div class="reset-header">
      <h2>找回密码</h2>
      <p>请输入您的注册邮箱，我们将向您发送重置密码的邮件</p>
    </div>
    
    <!-- 用户类型选择 -->
    <div class="user-type-section">
      <h3>账户类型</h3>
      <div class="user-type-buttons">
        <button 
          class="user-type-btn" 
          :class="{ active: userType === 'student' }"
          @click="userType = 'student'"
        >
          <i class="user-icon">👤</i>
          <span>学生账户</span>
        </button>
        <button 
          class="user-type-btn" 
          :class="{ active: userType === 'enterprise' }"
          @click="userType = 'enterprise'"
        >
          <i class="enterprise-icon">🏢</i>
          <span>企业账户</span>
        </button>
      </div>
    </div>

    <el-form ref="resetForm" :model="resetForm" :rules="resetRules" label-width="80px">
      <el-form-item label="邮箱" prop="email">
        <el-input 
          v-model="resetForm.email" 
          placeholder="请输入您的注册邮箱"
          type="email"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="loading">
          {{ loading ? '发送中...' : '发送重置邮件' }}
        </el-button>
        <el-button @click="goBack">返回登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userApi } from '../../api';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      userType: 'student', // 默认学生账户
      loading: false,
      resetForm: {
        email: ''
      },
      resetRules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    async submitForm() {
      this.$refs.resetForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            const resetData = {
              email: this.resetForm.email
              // 只传递邮箱，不需要user_type
            };
            
            console.log('发送重置邮件，数据:', resetData);
            
            // 调用正确的找回密码接口
            console.log('调用找回密码接口: /api/user/forgot-password');
            const response = await userApi.forgotPassword(resetData);
            
            console.log('重置邮件发送响应:', response);
            
            if (response && response.code === 200) {
              ElMessage.success(response.message || '重置邮件已发送，请检查您的邮箱');
              this.$router.push('/login');
            } else {
              ElMessage.error(response?.error || '发送重置邮件失败');
            }
          } catch (error) {
            console.error('发送重置邮件失败:', error);
            console.error('错误详情:', error.response?.data);
            console.error('错误状态码:', error.response?.status);
            
            if (error.response) {
              const { status, data } = error.response;
              console.log('错误状态码:', status);
              console.log('错误数据:', data);
              
              // 根据后端返回的错误码处理
              if (data && data.code) {
                switch (data.code) {
                  case 400:
                    ElMessage.error(data.error || '请求参数错误');
                    break;
                  case 404:
                    ElMessage.error(data.error || '该邮箱未注册');
                    break;
                  case 500:
                    ElMessage.error(data.error || '服务器错误，请稍后重试');
                    break;
                  default:
                    ElMessage.error(data.error || '发送重置邮件失败，请稍后重试');
                }
              } else {
                // 如果没有code字段，使用HTTP状态码
                switch (status) {
                  case 400:
                    ElMessage.error('邮箱格式错误或参数错误');
                    break;
                  case 404:
                    ElMessage.error('该邮箱未注册');
                    break;
                  case 500:
                    ElMessage.error('服务器错误，请稍后重试');
                    break;
                  default:
                    ElMessage.error('发送重置邮件失败，请稍后重试');
                }
              }
            } else {
              ElMessage.error('网络连接失败，请检查网络后重试');
            }
          } finally {
            this.loading = false;
          }
        }
      });
    },

    goBack() {
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.reset-container {
  max-width: 500px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.reset-header {
  text-align: center;
  margin-bottom: 30px;
}

.reset-header h2 {
  color: #333;
  margin-bottom: 10px;
  font-size: 24px;
}

.reset-header p {
  color: #666;
  font-size: 14px;
}

.user-type-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.user-type-section h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
}

.user-type-buttons {
  display: flex;
  gap: 15px;
}

.user-type-btn {
  flex: 1;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.user-type-btn:hover {
  border-color: #409eff;
  transform: translateY(-2px);
}

.user-type-btn.active {
  border-color: #409eff;
  background: #409eff;
  color: #fff;
}

.user-type-btn i {
  font-size: 24px;
}

.user-type-btn span {
  font-size: 14px;
  font-weight: 500;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
}


</style>